<script>
import TileLayer from 'ol/layer/Tile'
import ImageLayer from 'ol/layer/Image'
import {XYZ, ImageWMS} from 'ol/source.js'
import View from 'ol/View'
import Style from 'ol/style/Style'
import Icon from 'ol/style/Icon'

const mapTypeSource = [{
  /**
   * 有偏移
   {layerId: 'googleYX', url: 'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G', zIndex: 1, visible: true },
   {layerId: 'googleDX', url: 'http://mt3.google.cn/vt/lyrs=t@131,r@216000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Gal', zIndex: 1, visible: false},
   {layerId: 'googleDZ', url: 'http://mt0.google.cn/vt/lyrs=m&scale=2&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}', zIndex: 1, visible: false},
   */
  layerId: 'googleYX', url: 'https://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=74f751183c5556b9422a6fd335c7a300', zIndex: 0, visible: true},
{layerId: 'googleYX', url: 'https://t{0-3}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=74f751183c5556b9422a6fd335c7a300', zIndex: 0, visible: true},

{layerId: 'tdtDX', url: 'https://t{0-3}.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=74f751183c5556b9422a6fd335c7a300', zIndex: 0, visible: false},
{layerId: 'tdtDX', url: 'https://t{0-3}.tianditu.gov.cn/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=74f751183c5556b9422a6fd335c7a300', zIndex: 0, visible: false},

{layerId: 'tdtDZ', url: 'https://t{0-3}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=74f751183c5556b9422a6fd335c7a300', zIndex: 0, visible: false},
{layerId: 'tdtDZ', url: 'https://t{0-3}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=74f751183c5556b9422a6fd335c7a300', zIndex: 0, visible: false}
]
const layerCheckList = ['FCB0164A-4D76-4CCC-B67C-805457EADB2C', '4C47656B-912C-456A-BBB9-E38EBDD11E7E']
const mapSource = [
  {layerId: 'googleYX', url: 'https://mt{0-3}.google.cn/vt/lyrs=s&h1=zh-CN&g0=CN&x={x}&y={y}&z={z}', zIndex: 0, visible: true},
  {layerId: 'tdtBZ', url: 'https://t{0-3}.tianditu.gov.cn/cia_w/wmts?tk=74f751183c5556b9422a6fd335c7a300}', zIndex: 0, visible: true},
  {id: 'FCB0164A-4D76-4CCC-B67C-805457EADB2C', name: '湿地边界', layerKey: 'wetland:border_yndh', kmlUrl: 'http://59.36.169.96:8089/geoserver/wetland/wms', sortNo: 1, visible: true},
  {id: '4C47656B-912C-456A-BBB9-E38EBDD11E7E', name: '功能区划', layerKey: 'wetland:gnfq_yndh', kmlUrl: 'http://59.36.169.96:8089/geoserver/wetland/wms', sortNo: 2, visible: true}
]
const mapCenter = [108.35035, 22.92107]
const mapZoom = 17
const mapMaxZoom = 23
const mapProjection = 'EPSG:4326'
const mapLayer = [
  new TileLayer({
    layerId: mapSource[0].layerId,
    source: new XYZ({
      url: mapSource[0].url
    }),
    zIndex: mapSource[0].zIndex,
    visible: mapSource[0].visible
  }),
  new TileLayer({
    layerId: mapSource[1].layerId,
    source: new XYZ({
      url: mapSource[1].url
    }),
    zIndex: mapSource[1].zIndex,
    visible: mapSource[1].visible
  }),
  new ImageLayer({
    layerId: mapSource[2].id,
    title: mapSource[2].name,
    source: new ImageWMS({
      url: mapSource[2].kmlUrl,
      params: {'LAYERS': mapSource[2].layerKey, 'SRS': mapProjection},
      serverType: 'geoserver'
    }),
    zIndex: mapSource[2].sortNo,
    visible: mapSource[2].visible
  }),
  new ImageLayer({
    layerId: mapSource[3].id,
    title: mapSource[3].name,
    source: new ImageWMS({
      url: mapSource[3].kmlUrl,
      params: {'LAYERS': mapSource[3].layerKey, 'SRS': mapProjection},
      serverType: 'geoserver'
    }),
    zIndex: mapSource[3].sortNo,
    visible: mapSource[3].visible
  })]
const smallMapLayer = [mapLayer[0], mapLayer[1], mapLayer[2]]
const mapView = new View({
  center: mapCenter,
  zoom: mapZoom,
  maxZoom: mapMaxZoom,
  projection: mapProjection
})
const smallMapView = new View({
  center: mapCenter,
  zoom: (mapZoom - 1),
  maxZoom: mapMaxZoom,
  projection: mapProjection
})

function getIconStyle (icon) {
  let iconStyle = new Style({
    image: new Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: icon
    })
  })
  return iconStyle
}

export default
{
  mapTypeSource,
  layerCheckList,
  mapSource,
  mapCenter,
  mapMaxZoom,
  mapZoom,
  mapProjection,
  mapLayer,
  smallMapLayer,
  mapView,
  smallMapView,
  getIconStyle
}
</script>
